<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>


<style>
<!--
.check {
	margin-left: 15px;
}
-->
</style>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/editor_all.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/editor_config.js"></script>
<script type="text/javascript" charset="utf-8" src="<%=basePath%>ueditor/lang/zh-cn/zh-cn.js"></script>


<c:if test="${message }">
	<div style="width: 98%;">
		<strong> 修改成功</strong>
	</div>
</c:if>
<c:if test="${message == false }">
	<div style="width: 98%; color: red">
		<strong> 修改失败</strong>
	</div>
</c:if>
<form action="<%=basePath %>backend/article/update" method="post" id='newsForm'>
	<div class="row">
		<div class="col-sm-6 input-group">
			<span class="input-group-addon">归属</span>
			<select class="form-control" id='firstMenu' style=" width:200px; float: left; margin-right: 5px;" onchange="selectMenu()" >
				<!-- 一级菜单START -->
				<c:set var="br" value="f"/>
				<c:forEach items="${menus}" var="menu">
				  <c:if test="${fn:length(menu.childs)>0 }">
					<c:set var="selected" value="" />
					<c:if test="${br=='f' }">
						<c:forEach items="${menu.childs}" var="ch">
							<c:if test="${article.menuId==ch.id }">
								<c:set var="selected" value="selected='selected'" />
								<c:set var="br" value="true"/>
							</c:if>
						</c:forEach>
					</c:if>
					<option  value="${menu.id }" ${selected } >${menu.name }</option>
				  </c:if>
				</c:forEach>
				<!-- 一级菜单END -->
			</select>
			<select class="form-control" id='subMenu' name='menuId'  style=" width:200px;  float: left;"><!-- id='bnkind' -->
				<option></option>
				<!-- 一级菜单START -->
				<c:forEach items="${menus}" var="menu">
					<!-- 二级菜单START -->
					<c:forEach items="${menu.childs}" var="subMenu">
						<c:set var="selected" value="" />
						<c:if test="${article.menuId==subMenu.id }">
							<c:set var="selected" value="selected='selected'" />
						</c:if>
						<option value="${subMenu.id }" ${selected } idd="${menu.id}" >${subMenu.name }</option>
					</c:forEach>
					<!-- 二级菜单END -->
				</c:forEach>
				<!-- 一级菜单END -->
			</select>
			<span></span>
		</div>
		<br /> <br />
		<!-- Optional: clear the XS cols if their content doesn't match in height -->
		<div class="clearfix visible-xs"></div>
	</div>
	
	<!-- 属性选择 -->
	<div class="row"  style='margin-top: 10px;'>
		<div class="col-sm-9 input-group">
			<span class="input-group-addon">属性</span>
			<div id="propertySelectView" style=" margin-top: -5px;">
			  <c:forEach items="${article.articleProperties }"  var="articlePropertie" varStatus="sta">	
				<div style=" width:550px;  margin-top:5px;">
					<select class="form-control" id='bnkind' name='ap[${sta.index }].propertyId' style="width:200px; float: left; margin-right: 5px;">
						<option value="0">--属性选择，可不选--</option>
						<c:forEach items="${propertyList }"  var="property">
							<c:if test="${property.isValid && articlePropertie.propertyId!=property.id}">
								<option value='${property.id }' >${property.name }</option>
							</c:if>
							<c:if test="${property.isValid && articlePropertie.propertyId==property.id }">
								<option value='${property.id }' selected="selected" >${property.name }</option>
							</c:if>
							<c:if test="${!property.isValid && articlePropertie.propertyId==property.id }">
								<option value='${property.id }' selected="selected" >${property.name }</option>
							</c:if>
						</c:forEach>
					</select>
					<input class="form-control " type="text" name="ap[${sta.index }].propertyVale"
						 style='width:200px; height: 33px; float: left; margin-right: 5px;' value="${articlePropertie.propertyVale }" />
					<input type="button" value="-" class="btn btn-info" onclick="deletePropertySelect(this)"/>
					<input type="button" value="+" class="btn btn-info" onclick="addPropertySelect(this);"/>
				</div>
			  </c:forEach>
			</div>
			<!-- 属性添加div，不可随意增加或者减少div层 -->
			<div id="propertySelect" style="display: none;">
				<div style=" width:500px; margin-top:5px;">
					<select class="form-control" id='bnkind' name='propertyId' style="width:150px; float: left; margin-right: 5px;">
						<option>--属性选择，可不选--</option>
						<c:forEach items="${propertyList }"  var="property">
							<c:if test="${property.isValid }">
								<option value='${property.id }' >${property.name }</option>
							</c:if>
						</c:forEach>
					</select>
					<input class="form-control " type="text" name="propertyVale"
						 style='width:200px; height: 33px; float: left; margin-right: 5px;' />
					<input type="button" value="-" class="btn btn-info" onclick="deletePropertySelect(this)"/>
					<input type="button" value="+" class="btn btn-info" onclick="addPropertySelect(this);"/>
					
				</div>
			</div>
				<input type="hidden" id="proSize" value="${fn:length(article.articleProperties) }" />
		</div>
	</div>
	
	<div class="row">
		<div class="col-sm-9 input-group" style='margin-top: 10px;'>
			<span class="input-group-addon">标题</span>
			<input class="form-control " style='height: 30px; width: 627px' type="text" name="title" value="${article.title }" maxlength="30" />
			<span></span>
		</div>
	</div>
	<div style='margin-top: 10px;'>
		<script id="editor"></script>
	</div>
	<!-- <input type="checkbox" value="0" name='index' id='index'  />首页新闻 -->
	<input type="submit" value="完成" style="margin-left: 600px; margin-top: 10px;" class="btn btn-info" onclick="return getContent();" />
	<textarea id="content1"  name="content" style=" display: none">${article.content }</textarea>
	<input id='belong' name='belong' type="hidden" />
	<input name="id" type="hidden" value="${article.id }" />
</form>
	
<script type="text/javascript">
//缓存二级菜单的option选项
var subMenuOptions = new Array();
setSubMenuOptions();
function setSubMenuOptions() {
	var i = 0;
	$("#subMenu option").each(function(){
		subMenuOptions[i] = $(this);
		$(this).remove();
		i ++;
	});
	
	selectMenu();
}

function selectMenu() {
	$("#subMenu").empty();
	
	var id = jQuery("#firstMenu option:selected").val();
	for (var i = 0; i < subMenuOptions.length; i++) {
		var sm = $(subMenuOptions[i]);
		if (sm.attr("idd") == id) {
			$("#subMenu").append(sm);
		}
	}
}
</script>
<script type="text/javascript">
/*---------------------------属性选择层控制------------------------------*/	
	var size = document.getElementById("proSize").value;
	var apIndex = size;	//属性索引,便于增加属性时设置表单名
	
	if (size == 0)
		addPropertySelect(1);
	
	//添加新的属性选择div标签
	function addPropertySelect(index) {
		var propertySelect = document.getElementById("propertySelect");
		var childs = propertySelect.childNodes;
		
		var oldSelectNode = propertySelect.cloneNode(true);
		//组织属性表单名称，便于传入多个属性
		for (var i = 0; i < childs.length; i ++) {
			if (childs[i].nodeName == "DIV") {
				var cs = childs[i].childNodes;
				for (var j = 0; j < cs.length; j ++) {
					if (cs[j].nodeName.toUpperCase() == "SELECT") {
						cs[j].setAttribute("name", "ap[" + apIndex + "]." + cs[j].getAttribute("name"));
						
					}
					
					if (cs[j].nodeName.toUpperCase() == "INPUT" && cs[j].getAttribute("type") == "text") {
						cs[j].setAttribute("name", "ap[" + apIndex + "]." + cs[j].getAttribute("name"));
					}
				}
				
				apIndex ++;
			}
		}
		
		if (index != 1) {
			for (var i = 0; i < childs.length; i++)
				insertAfter(childs[i].cloneNode(true), index.parentNode);
		} else {
			var chs = oldSelectNode.childNodes;
			for (var i = 0; i < chs.length; i++)
				document.getElementById("propertySelectView").appendChild(childs[i].cloneNode(true));
			//在第一次添加完元素后，在属性选择狂上添加一个距离上面元素为5PX间隔的div空层
			/*for (var i = 0; i < chs.length; i ++) {
				if (chs[i].nodeName.toUpperCase() == "DIV")
					chs[i].innerHTML = "<span style='margin-top:5px; display:block'></span>" + chs[i].innerHTML;
			}*/
		}
		
		propertySelect.innerHTML = oldSelectNode.innerHTML;
		
	}
	
	function deletePropertySelect(element) {
		element.parentNode.parentNode.removeChild(element.parentNode);
	}
	
	//在节点后插入节点
	function insertAfter(newElement, targetElement) {
   		var parent = targetElement.parentNode;
   		if ( parent.lastChild == targetElement ) {
    		// 如果最后的节点是目标元素，则直接添加。因为默认是最后
    		parent.appendChild(newElement );
   		} else {
    		//如果不是，则插入在目标元素的下一个兄弟节点的前面。也就是目标元素的后面。
    		parent.insertBefore( newElement, targetElement.nextSibling );
   		}
  	}
</script>
<script type="text/javascript">
	var ue = UE.getEditor('editor');
	
	$(function(){
		var content = $("#content1").val();
		ue.ready(function(){
           ue.setContent(content);
          });
	});
	
    function getContent() {
    	var str= ue.getContent();
        //document.getElementById('content').value=str;
        $("#content1").val(str);
        
        var str="";
        var result = 0;
        if($("#bnkind").val()=="news")
        	{
        	 $(".newskind").each(function(){
             	
           	  if($(this).attr("checked") == true || $(this).attr("checked") == "checked")
   			  {
           		  str=$(this).val();
           		  result = parseInt(result,10) + parseInt(str,10);
           		  //alert(result);
   			  }
        	 });
        	}else{
        		 $(".bulletkind").each(function(){
                  	
                  	  if($(this).attr("checked") == true || $(this).attr("checked") == "checked")
          			  {
                  		  str=$(this).val();
                  		  result = parseInt(result,10) + parseInt(str,10);
                  		  //alert(result);
          			  }
               	 });
        	}
       
       
      // alert(result);
       
       
       switch(result)
       {
       case 1:
    	   result = "0001";
    	   break;
       case 10:
    	   result = "0010";
    	   break;
       case 100:
    	   result="0100";
    	   break;
       case 11:
    	   result = "0011";
    	   break;
       case 101:
    	   result = "0101";
    	   break;
       case 110:
    	   result = "0110";
    	   break;
       case 111:
    	   result = "0111";
    	   break;
       }
     //  alert(result + "--" );
       $("#belong").val(result);
      /* if($("#index").attr("checked") == true || $("#index").attr("checked") == "checked")
    	   {
    	   $(this).val(1);
    	   }*/
       result=0;
        if(document.getElementById('title').value.length==0||str.length==0)
        	{
        	  alert('还有尚未填写的内容！');
        	  document.getElementById('title').focus();
        	  return false;
        	}
        return true;
    }
</script>
